<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>当前计数：<span class="counter"></span></h2>
    <button class="add">+1</button>
    <button class="sub">-1</button>

    <script>
        // 1.获取dom
        const h2El = document.querySelector("h2")
        const counterEl = document.querySelector(".counter")
        const addBtnEl = document.querySelector(".add")
        const subBtnEl = document.querySelector(".sub")

        // 2.定义一个变量记录数据
        let counter = 100
        counterEl.textContent = counter

        // 2.监听按钮点击
        addBtnEl.onclick = function() {
            counter++
            counterEl.textContent = counter
        }

        subBtnEl.onclick = function() {
            counter--
            counterEl.textContent = counter
        }
    </script>
</body>
</html>